import React, {Component, Fragment} from 'react';
import {Card, Table, message, Modal} from 'antd';
import axios from '../../axios';

import './table.less';


class TableBasic extends Component {

    state = {
        dataSource: []
    };

    componentWillMount() {
        this.getData();
    }


    // 动态获取 easy-mock 数据
    getData = () => {
        axios.ajax({
            url: '/basic-table/list'
        }).then(res => {
            // console.log(res);
            if (res.code === 2000) {
                res.data.list.map((item, index) => {
                    item.key = item + index;
                    return null;
                });
                this.setState({
                    dataSource: res.data.list,
                });
                message.success(res.msg);
            } else {
                Modal.error({
                    title: '提示消息',
                    content: res.msg,
                });
            }
        });
    };

    render() {
        const columns = [
            {title: 'id', dataIndex: 'id'},
            {title: '用户名', dataIndex: 'username'},
            {title: '昵称', dataIndex: 'nickname'},
            {
                title: '性别',
                dataIndex: 'gender',
                render(gender) {
                    return gender === 1 ? '男' : '女'
                }
            },
            {title: '年龄', dataIndex: 'age'},
            {title: '生日', dataIndex: 'birthday'},
            {
                title: '状态',
                dataIndex: 'currState',
                render(currState) {
                    let config = {
                        1: '应届毕业生',
                        2: '屌丝一枚',
                        3: '社会老鸟',
                        4: '高富帅',
                        5: '白富美',
                        6: '创业者',
                        7: '技术大牛',
                        8: '编程小白',
                    };
                    return config[currState];
                }
            },
            {
                title: '爱好',
                dataIndex: 'hobbies',
                render(hobbies) {
                    let config = {
                        1: '编程',
                        2: '唱歌',
                        3: '跳舞',
                        4: '乐器',
                        5: '游泳',
                        6: '爬山',
                        7: '分享技术',
                        8: '打篮球',
                        9: '健身',
                        10: '游戏',
                    };
                    let index = hobbies.length - 1;
                    return config[hobbies[index]];
                }
            },
            {title: '地址', dataIndex: 'address'},
        ];
        const dataSource = [
            {
                id: 1,
                username: '哈士奇',
                nickname: '屁屁',
                gender: 1,
                age: 24,
                birthday: '1996-01-20',
                currState: 8,
                hobbies: [1, 2, 7, 8],
                address: '北京市海淀区中关村'
            },
            {
                id: 2,
                username: '架构师卓',
                nickname: '哈士卓',
                gender: 1,
                age: 26,
                birthday: '1993-01-20',
                currState: 5,
                hobbies: [1, 7],
                address: '北京市海淀区中关村'
            },
            {
                id: 3,
                username: '哈士奇',
                nickname: '屁屁',
                gender: 2,
                age: 24,
                birthday: '1996-01-20',
                currState: 1,
                hobbies: [1, 3, 4, 7],
                address: '北京市海淀区中关村'
            },
            {
                id: 4,
                username: '哈士奇',
                nickname: '屁屁',
                gender: 2,
                age: 24,
                birthday: '1996-01-20',
                currState: 3,
                hobbies: [3, 10],
                address: '北京市海淀区中关村'
            },
            {
                id: 5,
                username: '陈皮皮',
                nickname: '皮皮',
                gender: 1,
                age: 22,
                birthday: '1997-05-12',
                currState: 8,
                hobbies: [1, 2, 5],
                address: '北京市海淀区中关村'
            },
        ];
        dataSource.map((item, index) => {
            item.key = item + index;
            return null;
        });


        return (
            <Fragment>
                <Card title={'基础表格'} className={'card-table'}>
                    <Table bordered={true}
                           columns={columns} dataSource={dataSource}/>
                </Card>
                <Card title={'动态数据渲染表格'} className={'card-table'}>
                    <Table bordered={true}
                           columns={columns} dataSource={this.state.dataSource}/>
                </Card>
            </Fragment>
        );
    }
}

export default TableBasic;